<template>
  <div>
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      v-if="initStatus"
      @tab-click="tabClickChange"
    >
      <el-tab-pane  name="a">
        <template #label>
          <div id="a">默认配置</div>
        </template>
        <A :data="configState.commService"></A>
      </el-tab-pane>
      <el-tab-pane name="b">
        <template #label>
          <div id="b">任务列表</div>
        </template>
        <B :data="configState.list" ref="tab1Ref"></B>
      </el-tab-pane>
      <!-- <el-tab-pane label="待执行" name="c">
        <C :data="configState.list" ref="tab2Ref"></C>
      </el-tab-pane> -->
      <el-tab-pane name="d">
        <template #label>
          <div id="d">执行中</div>
        </template>
        <D :data="configState.list" ref="tab3Ref"></D>
      </el-tab-pane>
      <el-tab-pane name="e">
        <template #label>
          <div id="e">日志</div>
        </template>
        <E :data="configState.list" ref="tab4Ref"></E>
      </el-tab-pane>
    </el-tabs>
  </div>
 <div style="position: absolute;top: 10px;right:20px;z-index: 1;">
  <el-button type="primary" @click="open = true;activeName ='a'">教程引导</el-button>
 </div>
  <el-tour v-model="open" @change="tourChange">
    <el-tour-step target="#a" title="默认配置" description="如果任务里没有填写服务器配置,将使用默认服务器配置中的属性 优先级: 任务配置 > 默认配置">
    </el-tour-step>
    <el-tour-step target="#b" title="任务列表" description="这里可以添加编辑和执行所勾选任务">
    </el-tour-step>
    <el-tour-step target="#d" title="执行中" description="这里可以查看正在执行中的任务, 已完成的(无论成功或者失败)将会踢出此队列, 并存储一条log日志" >
    </el-tour-step>
    <el-tour-step target="#e" title="执行中" description="这里可以查询任务执行日志">
    </el-tour-step>
  </el-tour>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import A from "./components/a.vue";
import B from "./components/b.vue";
import C from "./components/c.vue";
import D from "./components/d.vue";
import E from "./components/e.vue";

const open = ref(false);
const tourChange = (e) => {
  const data = {
    1: 'b',
    2: 'd',
    3: 'e',
  }
  activeName.value = data[e];
};
const configState = ref({
  commService: {},
  list: [],
  log: {
    runing: [],
    end: [],
  },
});

const activeName = ref("a");
const tab1Ref = ref(null);
const tab2Ref = ref(null);
const tab3Ref = ref(null);
const tab4Ref = ref(null);

const tabClickChange = async (e) => {
  if (e.index == 1) {
    // tab1Ref.value.init();
  }
  if (e.index == 2) {
    // tab2Ref.value.init();
  }
  if (e.index == 3) {
    // tab3Ref.value.init();
  }
  if (e.index == 4) {
    // tab4Ref.value.init();
  }
};

const initStatus = ref(false);
const init = () => {
  // 延时等待py把api注入到window中
  let lock = setInterval(() => {
    if (window?.pywebview?.api) {
      initStatus.value = true;
      ElMessage.success("python api 注入完成");
      clearInterval(lock);
    }
  }, 100);
};
init();
</script>

